<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理界面</title>

    <style>
        .myTable {
            margin: 0 auto;
            height: 100px;
            width: 700px;
        }

        .myTitle {
            background-color: #F2F3F5;
        }

        tr:hover {
            background: #edffcf;
        }

        th {
            font-size: 16px;
            font-weight: bold;
        }

        td {
            font-size: 14px;
        }

        th, td {
            border: solid 1px black;
            text-align: center;
        }
    </style>
    <!--引入vue和axios-->
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script src="/node_modules/axios/dist/axios.js"></script>
</head>
<body>
<div id="app">
    <table class="myTable">
        <tbody>
        <tr class="myTitle">
            <th>编号</th>
            <th>用户名</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>创建日期</th>
            <th>生日</th>
            <th>更新日期</th>
            <th>操作</th>
        </tr>

        <tr v-for="user in users">
            <td v-text="user.id"></td>
            <td v-text="user.userName"></td>
            <td v-text="user.name"></td>
            <td v-text="user.age"></td>
            <td v-text="user.sex"></td>
            <td v-text="date(user.created)"></td>
            <td v-text="date(user.birthday)"></td>
            <td v-text="date(user.updated)"></td>
            <td>
                <button @click="deleteUserById(user.id)">删除</button>
            </td>
        </tr>


        </tbody>
    </table>
</div>

</body>
<script type="text/javascript">

    new Vue({
        el: "#app",
        data: {
            users: []
        },
        methods: {
            findAll() {
                axios.get("user/findAll").then((result) => {
                    this.users =  result.data;
                    console.log(result.data)
                })
            },
            date(val){
                var date = new Date(val);

                return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"
            },
            deleteUserById(id){
                axios.delete("user/"+id).then((res)=>{
                    this.findAll()
                })
            }
        },
        created: function () {
            this.findAll()
        }
    })

</script>
</html>